<template>
	<view class="page_box">
		<u-navbar :is-back="true" title="趣赚大厅" v-if="1" :border-bottom="false"></u-navbar>

		<view class="content_box ">
			<u-tabs 
			:list="list" 
			:is-scroll="false" 
			:current="current"
			font-size="30"
			inactive-color="#717171"
			active-color="#FFB81E"
			@change="tabschange"></u-tabs>
			
			<view class="tab-content">
				<view class="tab-item" v-show="current==0">
					<view class="content-item">
						<view class="rads-box">
							<view class="flex align-center">
								<u-icon name="info-circle" color="#232323" size="28"></u-icon>
								<text class="f30 margin-left-sm">规则：</text>
							</view>
							<view class="context-box flex">
								<i class="cuIcon-title"></i>
								<view class="box-tipc">
									您有一年的时间可以成团队，当你团队内成员集齐6个人时，您将有机会获得消费金额的免单，祝您好运！
								</view>
							</view>
						</view>
					</view>
					<!-- 拼团 -->
					<view class="type-cont" v-show="type_show == 0">
						<view class="joinAGrp-content">
							<view class="title">免单进行中</view>
							<view class="join-content flex justify-between flex-wrap">
								<view class="join-box">
									<view class="posi-centerr">5-6万</view>
									<view class="avatar-box">
										<view class="avatar-item">
											<view class="avatar">
												<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/custserv_avatar.png" class="img"></image>
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
									</view>
								</view>
								<view class="join-box">
									<view class="posi-centerr">5-6万</view>
									<view class="avatar-box">
										<view class="avatar-item">
											<view class="avatar">
												<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/custserv_avatar.png" class="img"></image>
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
									</view>
								</view>
								<view class="join-box">
									<view class="posi-centerr">5-6万</view>
									<view class="avatar-box">
										<view class="avatar-item">
											<view class="avatar">
												<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/custserv_avatar.png" class="img"></image>
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
									</view>
								</view>
								<view class="join-box">
									<view class="posi-centerr">5-6万</view>
									<view class="avatar-box">
										<view class="avatar-item">
											<view class="avatar">
												<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/custserv_avatar.png" class="img"></image>
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="content-item">
							<button class="circle-btn" @click="determine()">退出登录</button>
						</view>
					</view>
					<!-- 拼团成功 -->
					<view class="type-cont content-item" v-show="type_show == 1">
						<view class="card-content joinAGrp-content">
							<!-- 免单成团 -->
							<view class="type-title" style="display: none;">
								<view class="title">共6人，成团成功</view>
								<view class="title-tipc text-center">
									<u-icon name="bell" color="#C58D15"></u-icon>
									<text>成功成团！系统将在</text>
									<text class="f24 text-bold" style="color: #815B0A;">23 :59</text>
									<text>后随机抽取一位幸运儿</text>
								</view>
							</view>
							<!-- 免单成团（成团成功标题） -->
							<view class="type-title">
								<view class="title">共6人，免单结束</view>
								<view class="title-tipc text-center">
									<u-icon name="bell" color="#C58D15"></u-icon>
									<text class="f24 margin-left-xs" style="color: #C58D15;">恭喜画画的*成为幸运儿，请前往公司地址领取免单金额</text>
								</view>
							</view>
							<!-- 免单成团（成团失败标题） -->
							<view class="type-title" style="display: none;">
								<view class="title">共6人，免单结束</view>
								<view class="title-tipc text-center">
									<u-icon name="bell" color="#C58D15"></u-icon>
									<text class="f24 margin-left-xs" style="color: #C58D15;">很遗憾，祝您下次好运</text>
								</view>
							</view>
							<view class="join-content flex justify-center flex-wrap">
								<view class="join-box">
									<view class="posi-centerr">5-6万</view>
									<view class="avatar-box">
										<view class="avatar-item">
											<view class="avatar">
												<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/custserv_avatar.png" class="img"></image>
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
									</view>
								</view>
							</view>							
						</view>
					</view>
					<!-- 加入后（邀请好友） -->
					<view class="card-content joinAGrp-content" v-show="type_show == 2">
						<view class="title" style="margin-top: 0;">共5人，差1人即可成团</view>
							<view class="title-tipc text-center">
								活动到期时间：2021.05.30 15:32
							</view>
							<view class="join-content flex justify-center flex-wrap">
								<view class="join-box" style="margin-bottom: 0;">
									<view class="posi-centerr">5-6万</view>
									<view class="avatar-box">
									<view class="avatar-item">
										<view class="avatar">
											<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/custserv_avatar.png" class="img"></image>
										</view>
									</view>
									<view class="avatar-item">
										<view class="avatar">
											
										</view>
									</view>
									<view class="avatar-item">
										<view class="avatar">
											
										</view>
									</view>
									<view class="avatar-item">
										<view class="avatar">
											
										</view>
									</view>
									<view class="avatar-item">
										<view class="avatar">
											
										</view>
									</view>
									<view class="avatar-item">
										<view class="avatar">
											
										</view>
									</view>
								</view>
							</view>
						</view>							
						<view class="content-item position-bottom">
							<view class="circle-btn">邀请好友</view>
						</view>
					</view>
				</view>
				<view class="tab-item" v-show="current==1">
					<view class="content-item">
						<view class="rads-box">
							<view class="flex align-center">
								<u-icon name="info-circle" color="#232323" size="28"></u-icon>
								<text class="f30 margin-left-sm">规则：</text>
							</view>
							<view class="context-box flex">
								<i class="cuIcon-title"></i>
								<view class="box-tipc">
									您有一年的时间可以成团队，当你团队内成员集齐6个人时，您将有机会均分消费金额，祝您好运！
								</view>
							</view>
						</view>
					</view>
					<!-- 拼团 -->
					<view class="type-cont" v-show="tpq_type_show==0">
						<view class="joinAGrp-content">
							<view class="title">拼团进行中</view>
							<view class="join-content flex justify-between flex-wrap">
								<view class="join-box">
									<view class="posi-centerr">5-6万</view>
									<view class="avatar-box">
										<view class="avatar-item">
											<view class="avatar">
												<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/custserv_avatar.png" class="img"></image>
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
									</view>
								</view>
								<view class="join-box">
									<view class="posi-centerr">5-6万</view>
									<view class="avatar-box">
										<view class="avatar-item">
											<view class="avatar">
												<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/custserv_avatar.png" class="img"></image>
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
									</view>
								</view>
								<view class="join-box">
									<view class="posi-centerr">5-6万</view>
									<view class="avatar-box">
										<view class="avatar-item">
											<view class="avatar">
												<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/custserv_avatar.png" class="img"></image>
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
									</view>
								</view>
								<view class="join-box">
									<view class="posi-centerr">5-6万</view>
									<view class="avatar-box">
										<view class="avatar-item">
											<view class="avatar">
												<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/custserv_avatar.png" class="img"></image>
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="content-item flex justify-between two-btn-box">
							<view class="circle-btn" @click="join_mask_case=true">快速加入</view>
							<view class="circle-btn red-btn">我要开团</view>
						</view>
					</view>
					<!-- 进行中 -->
					<view class="type-cont content-item" v-show="tpq_type_show == 1">
						<view class="card-content joinAGrp-content">
							<view class="type-title" style="display: none;">
								<view class="title" style="margin-top: 0;">共5人，差1人即可成团</view>
								<view class="title-tipc text-center">活动到期时间：2021.05.30 15:32</view>
							</view>
							<view class="type-title">
								<view class="title">共6人，成团成功</view>
								<view class="title-tipc text-center" style="color: #C58D15;">
									<u-icon name="bell" color="#C58D15"></u-icon>
									<text>成功成团！获得均分5万的资格，请前往公司领取均分金额</text>
								</view>
							</view>
							<view class="join-content flex justify-center flex-wrap">
								<view class="join-box" style="margin-bottom: 0;">
									<view class="posi-centerr">5-6万</view>
									<view class="avatar-box">
										<view class="avatar-item">
											<view class="avatar">
												<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/custserv_avatar.png" class="img"></image>
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
									</view>
								</view>
							</view>							
						</view>
						<view class="card-content joinAGrp-content">
							<view class="title" style="margin-top: 0;">共5人，差1人即可成团</view>
								<view class="title-tipc text-center">
									活动到期时间：2021.05.30 15:32
								</view>
								<view class="join-content flex justify-center flex-wrap">
									<view class="join-box" style="margin-bottom: 0;">
										<view class="posi-centerr">5-6万</view>
										<view class="avatar-box">
										<view class="avatar-item">
											<view class="avatar">
												<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/custserv_avatar.png" class="img"></image>
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
										<view class="avatar-item">
											<view class="avatar">
												
											</view>
										</view>
									</view>
								</view>
							</view>							
						</view>
						<view class="content-item position-bottom">
							<view class="circle-btn red-btn" @click="show_wykt = true">我要开团</view>
						</view>
					</view>					
				</view>				
				<view class="tab-item" v-show="current == 2">
					<view class="content-item">
						<view class="img-tipc">
							<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/tipc_zwkf.png" class="img"></image>
						</view>
						<view class="zwkf-text">暂未开放，敬请期待</view>
						<view class="rads-box">
							<view class="flex align-center">
								<u-icon name="info-circle" color="#232323" size="28"></u-icon>
								<text class="f30 margin-left-sm">规则：</text>
							</view>
							<view class="context-box flex">
								<i class="cuIcon-title"></i>
								<view class="box-tipc">
									邀约1名未装修业主成功注册APP 并成功砍价 ，立减总消费额的3‰；仅限11名准用户（邀请的用户必须是毛坯房用户）
								</view>
							</view>
							<view class="context-box flex">
								<i class="cuIcon-title"></i>
								<view class="box-tipc">
									支付时间：交付使用后每个月11号，11：00—18:00； 地点：公司或用户家。
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="tab-item" v-show="current == 3">
					<view class="content-item">
						<view class="img-tipc">
							<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/tipc_zwkf.png" class="img"></image>
						</view>
						<view class="zwkf-text">暂未开放，敬请期待</view>
						<view class="rads-box">
							<view class="flex align-center">
								<u-icon name="info-circle" color="#232323" size="28"></u-icon>
								<text class="f30 margin-left-sm">规则：</text>
							</view>
							<view class="context-box flex">
								<i class="cuIcon-title"></i>
								<view class="box-tipc">
									必须在本平台（青岛领装科技有限公司—116乐享家平台）消费
								</view>
							</view>
							<view class="context-box flex">
								<i class="cuIcon-title"></i>
								<view class="box-tipc">
									邀请用户所消费金额的总额必须是自己消费金额的三倍，即可获得足额佣金。最多邀请三名好友（扣除个人所得税）
								</view>
							</view>
							<view class="context-box flex">
								<i class="cuIcon-title"></i>
								<view class="box-tipc">
									支付时间：交付使用后每个月11号，11：00—18:00；地点：公司或用户家。
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 选择器 -->
			<u-select confirm-color="#FFB81E" v-model="show_wykt" :list="wykt_list" @confirm="wykt_confirm"></u-select>
			<!-- 快速加入弹窗 -->
			<u-mask :show="join_mask_case">
				<view class="warp">
					<view class="mask-content bg-img">
						<view class="mask-box">
							<view class="text-them text-center padding-lr">进入拼团区需实缴3650元，若拼团失败将返还至您的账户</view>
							<view class="btn-box">
								<navigator url="" hover-class="none" class="mask-btn">去支付</navigator>
							</view>
						</view>
					</view>
					<u-icon name="close-circle" color="#ffffff" size="50" @click="join_mask_case = false" class="icon-btn"></u-icon>
				</view>
			</u-mask>

		</view>

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [{
				name: '免单区'
			}, {
				name: '拼团区'
			}, {
				name: '砍价区',
			}, {
				name: '直推区',
			}],
			current: 0,
			type_show:1,
			tpq_type_show:1,
			wykt_list:[ //我要开团
				{
					value: '5-6万',
					label: '5-6'
				},
				{
					value: '5-7',
					label: '5-7'
				},
				{
					value: '5-8',
					label: '5-8'
				}
				
			],
			show_wykt:false,
			join_mask_case:false,
		};
	},
	onShow() {
		
	},
	onLoad(e) {},
	methods: {
		tabschange(index) {
			this.current = index;
			console.log(this.current)
		},
		wykt_confirm(e){
			//console.log(e);
		}
	}
};
</script>

<style lang="scss" scoped>
.page_box {
	width: 100vw;
	height: 100vh;
	background: #f9f9f9 !important;
}

.content_box {
	.rads-box{
		background: #ffffff;
		border-radius: 20rpx;
		padding: 32rpx 22rpx;
		.cuIcon-title{
			color: #FED252;
			font-size: 48rpx;
			margin-right: 10rpx;
			margin-left: -10rpx;
		}
		.context-box{
			margin-top: 40rpx;
			.box-tipc{
				line-height: 48rpx;
				color: #4D4D4D;
				font-size: 26rpx;
			}			
		}		
	}
	.joinAGrp-content{
		.title{
			font-size: 30rpx;
			margin: 60rpx 0 46rpx;
			text-align: center;
		}
		.join-content{
			padding: 0 20rpx;
			.join-box{
				width: 340rpx;
				height: 340rpx;
				background: #EFEFEF;
				border-radius: 50%;
				overflow: hidden;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 40rpx;
				.posi-centerr{
					position: absolute;
					width: 180rpx;
					height: 60rpx;
					font-size: 30rpx;
					line-height: 60rpx;
					background: #d8d8d8;
					border-radius: 30rpx;
					color: #232323;
					left: 0rpx;
					right: 0rpx;
					top: 0rpx;					
					bottom: 0rpx;
					margin:auto;
					text-align: center;					
				}
				.avatar-box{
					width: 74%;
					height: 80%;
					position: relative;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					.avatar-item{
						width: 50%;
						.avatar{
							width: 90rpx;
							height: 90rpx;
							border-radius: 50%;
							background-color: #BFBFBF;
							margin-left: 30rpx;
							position: relative;
							&::after{
								content: "...";
								position: absolute;
								width: 100%;
								height: 100%;
								line-height: 66rpx;
								color: white;
								text-align: center;
								font-size: 48rpx;
							}
							.img{
								width: 100%;
								height: 100%;
							}
						}	
						&:nth-child(even){
							display: flex;
							justify-content: flex-end;
							.avatar{
								margin-right: 30rpx;
								margin-left: 0;
							}
						}
						&:nth-child(3){
							.avatar{
								margin-left: -24rpx;
							}
						}
						&:nth-child(4){
							.avatar{
								margin-right: -24rpx;
								margin-left: 0;
							}							
						}											
					}
				}
			}
		}
	}
	.tab-item{
		padding-bottom: 60rpx;
	}
	.circle-btn{
		background: #FFBF6C;
		color: #FFFFFF;
		font-family: PingFang SC, PingFang SC-Medium;
		border-radius: 45rpx;
		font-size: 30rpx;
		font-weight: 500;
		line-height: 90rpx;
		text-align: center;
	}
	.red-btn{
		background: #EC7066;
	}
	.card-content{
		border-radius: 20rpx;
		background: white;
		padding: 32rpx 20rpx;
		margin-bottom: 20rpx;
	}
	.title-tipc{
		font-size: 24rpx;
		margin-bottom: 30rpx;
	}
	.two-btn-box{
		padding-bottom: 50rpx;
		.circle-btn{
			width: 45%;
		}
	}
	.type-cont.content-item{
		padding-top: 0;
		padding-bottom: 50rpx;
	}
	.zwkf-text{
		text-align: center;
		color: #999999;
		font-size: 30rpx;
		margin: 30rpx 0 92rpx;
	}
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		height: 100%;
		.mask-content{
			background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210619135313.png);
			background-size: 100%;
			width: 85%;
			min-height: 700rpx;
			.mask-box{
				position: relative;
				top: 340rpx;
				padding: 30rpx;
				.text-them{
					color: #7c633f;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					line-height: 50rpx;
				}
				.btn-box{
					margin-top: 60rpx;
					text-align: center;
					.mask-btn{
						background: #ec7066;
						border-radius: 40rpx;
						padding: 20rpx 86rpx;
						color: white;
						font-size: 28rpx;
						text-align: center;
						display: inline-block;
					}
				}				
			}
		}
		.yqhy-content{
			background: #FDF5E2;
			border-radius: 20rpx;
			width: 75%;
			min-height: auto;
			.mask-box{
				top: 0;
				padding: 70rpx 40rpx 50rpx;
			}
		}
		.icon-btn{
			margin-top: 50rpx;
		}
	}
	.img-tipc{
		width: 100%;
		text-align: center;
		margin: 130rpx 0 30rpx;
		.img{
			width: 322rpx;
			height: 329rpx;
			display: inline-block;
		}
	}
}
</style>
